<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords"  th:content="${@config.getKey('blog.index.keywords')}">
    <meta name="description" th:content="${@config.getKey('blog.index.description')}">
    <title th:text="${@config.getKey('blog.index.title')}"></title>
    <link rel="stylesheet" th:href="@{/ajax/libs/font-icon/icon.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:inline="javascript"> var ctx = [[@{/}]]; </script>
    <script th:src="@{/ajax/libs/layer/layer.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/laypage/laypage.js}"></script>
    <script th:src="@{/ajax/libs/toastr/toastr.min.js}"></script>
    <script th:src="@{/ajax/libs/hc-sticky.js}"></script>
    <script th:src="@{/ajax/libs/zplayer/js/zplayer.min.js}"></script>
</head>
<body>
<style>
    body {
        height: 100vh;
        background: #001247;
        position: relative;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
.login{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding-bottom: 10%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    height: 100vh;
    background-position: 50%;
}
    .home-header {
        width: 100%;
        height: 5.8vw;
        /*background-color: white;*/
        text-align: center;
    }
    .title {
        width: 100%;
       height: 5.8vw;
        line-height: 5.8vw;
        font-size: 2.2vw;
        font-weight: 600;
        letter-spacing: .3vw;
        color: #1472FF;
    }
    .title span:nth-child(1) {
        margin: 0 .8vw;
        font-size: 1.2vw;
        color: lightgray;
        font-weight: 400;
    }
    .title span:nth-child(2) {
        font-size: .8vw;
    }

    .login-wz {
        width: 26vw;
        height: 12vw;
        position: absolute;
        top: 10vw;
        left: 22vw;
    }

    .login-box {
        width: 30vw;
        height: 25vw;
        background: rgb(255 255 255 / 15%);
        border-radius: .3vw;
        overflow: hidden;
    }
    .login-box-title {
        height: 3vw;
        line-height: 3vw;
        font-size: 1.5vw;
        width: 19vw;
        margin: 2vw auto;
        color: white;
        text-align: center;
    }
    .login-box-tap {
        width: 100%;
        height: 2.7vw;
        background-color: #015181;
        color: #C9D9E4;
    }
    .login-box-tap-2 {
        height: 100%;
        width: 50%;
        display: inline-block;
    }
    .login-box-tap-2 p {
        height: 2.7vw;
        line-height: 2.7vw;
        text-align: center;
        font-size: 1vw;
    }
    .login-box-tap-fr {
        float: right;
    }
    .login-box-tap-select {
        background-color: white;
        color: #0B83DB;
    }

    .login-form {
        width: 100%;
        height: 15.9vw;
        position: relative;
    }
    .login-form input {
        height: 2.1vw;
        margin-top: 1.25vw;
    }
    .login-form-group {
        width: 90%;
        margin: .5vw auto;
    }
    .captchaBox {
        position: absolute;
        top: 1.4vw;
        right: .8vw;
        height: 2vw;
        width: 27%;
    }
    .login-form-submit {
        width: calc(90% - 12px);
        height: 2.6vw;
        position: absolute;
        bottom: 0;
        right: 2vw;
        border-radius: .3vw;
        border: 0;
        background: #1472FF;
        color: #EBF2FF;
        font-size: .8vw;
    }

    .login-foot {
        width: 100%;
        height: 5.8vw;
        position: absolute;
        top: 47.8vw;
    }
    .login-foot p {
        width: 80%;
        height: 5.8vw;
        line-height: 5.8vw;
        text-align: center;
        font-size: .8vw;
        color: #a8adc5;
        margin: 0 auto;
    }

    .col-sm-12 {
        position: relative;
    }
    label[class='error'] {
        position: absolute;
        top: 3.5vw;
        color: red;
    }
</style>
<div class="login">
    <div class="home-header">
        <p class="title" th:text="${@config.getKey('blog.index.title')}"></p>
    </div>

    <!--<div class="login-wz">-->
    <!--	<img th:src="@{/web/talents/img/dx_login_wz.png}" alt="" width="100%" height="100%">-->
    <!--</div>-->


    <!-- 通过点击图片触发函数，调起播放器 -->
    <div class="container-row explain-box" style="margin-top:0;width:100%;height:.7rem;">
        <div style="width: 45%;height:.5rem;margin-top: .12rem;">
            <img style="width: .5rem;height: .5rem;" src="./pay.png" onclick="videoShow()">
        </div>
    </div>

    <!-- msk-video -->
    <!-- 视屏播放器 -->
    <div id="loading-video"
         style="display:none;position: fixed;z-index: 1000;width: 100%;height:100%;left:
      50%;top: 50%;transform: translate(-50%,-50%);">
        <video id="video" style="vertical-align: baseline;" controls="" preload="" loop="loop"
               height="100%" width="100%" th:src="@{/ruoyi/login.mp4}" th:poster="@{/ruoyi/login.mp4}"></video>
        <div onclick="closeVideo()" class="close">×</div>
    </div>


    <div class="login-box">
        <p class="login-box-title">用户登录</p>
        <p style="color: red;width: 100%;text-align: center;margin-top: .5vw;margin-bottom: -1.5vw;"></p>
        <form id="signupForm" autocomplete="off" class="login-form">
            <div class="login-form-group">
                <div class="col-sm-12">
                    <input type="text" name="username" class="form-control"  placeholder="请输入用户名" required maxlength="11">
                </div>
            </div>
            <div class="login-form-group">
                <div class="col-sm-12">
                    <input id="password" type="password" name="password" class="form-control"  placeholder="请输入密码" required  maxlength="20">
                </div>
            </div>
            <div class="login-form-group" th:if="${captchaEnabled==true}">
                <div class="col-sm-12">
                    <input type="text" name="validateCode" class="form-control"  placeholder="验证码"  style="width: 67%"  maxlength="5">
                    <div class="captchaBox">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" height="100%" width="100%"/>
                        </a>
                    </div>
                </div>
            </div>
            <button id="btnSubmit" data-loading="正在验证登录，请稍后..."  class="login-form-submit">立即登录</button>

        </form>
    </div>
</div>
<div class="login-foot">
    <p><span>Copyright © 2018-2022 clips.xin All Rights Reserved. </span></p>
</div>

<div class="star-animation">
    <div class="star-animation0"></div>
    <div class="star-animation1"></div>
    <div class="star-animation2"></div>
</div>
<!--<video id="v1" class="video-bg" autoplay muted loop>-->
<!--    <source src="../static/ruoyi/login.mp4">-->
<!--</video>-->
<script th:inline="javascript">  var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.3.1}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<!-- RSA加密 -->
<script src="../static/js/jsencrypt.js" th:src="@{/js/jsencrypt.js}"></script>

<script type="text/javascript">
    var video = document.getElementById('v1');
    video.playbackRate = 0.5;
    videoShow();
    function PlayVideo(id) {
        console.log("video.id===>", id);
        //console.log("dom", document.getElementById(id));
        var myPlayer = videojs(id, {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: false
        });
        console.log("muplayer===>", myPlayer);
        myPlayer.play();
    }

    function PlayVideoClick(dom) {
        console.log(dom);
        console.log(dom.dataset.info);
        var id = dom.dataset.info;
        if (VideoInstance) {
            VideoInstance.invokeMethodAsync('PlayVideo', id);
        }
    }

    var VideoInstance = null;
    function registerVideoInstance(objRef) {
        VideoInstance = objRef;
    }

    //按钮触发播放器，设置外层div 为 block显示
    function videoShow() {
        document.getElementById("loading-video").style.display = "block";
        document.getElementById("video").style.display = "block";
    }

    //关闭时，设置外层div、video为  none
    //设置视屏时间为0，这样下次打开不会继续播放
    function closeVideo() {
        document.getElementById("loading-video").style.display = "none";
        let myVideo = document.getElementsByTagName('video')[0];
        myVideo.currentTime=0;
        myVideo.pause();
    }
</script>
</body>

</html>

